<script setup lang="ts">
import { ScalarMarkdown } from '@scalar/components'
import type { Tag, TransformedOperation } from '@scalar/types/legacy'

import { useNavState, useSidebar } from '../../../hooks'
import { Anchor } from '../../Anchor'
import { Card, CardContent, CardHeader } from '../../Card'
import { HttpMethod } from '../../HttpMethod'
import {
  Section,
  SectionColumn,
  SectionColumns,
  SectionContent,
  SectionHeader,
} from '../../Section'

const props = defineProps<{ id?: string; tag: Tag; isCollapsed?: boolean }>()

const { getOperationId, getTagId } = useNavState()
const { scrollToOperation } = useSidebar()

// TODO in V2 we need to do the same loading trick as the initial load
const scrollHandler = async (operation: TransformedOperation) => {
  const operationId = getOperationId(operation, props.tag)
  scrollToOperation(operationId)
}
</script>
<template>
  <Section
    :id="id"
    :label="tag.name.toUpperCase()">
    <SectionContent>
      <SectionColumns>
        <SectionColumn>
          <SectionHeader :level="2">
            <Anchor :id="getTagId(tag)">
              {{ tag['x-displayName'] ?? tag.name }}
            </Anchor>
          </SectionHeader>
          <ScalarMarkdown
            :clamp="isCollapsed ? '7' : false"
            :value="tag.description"
            withImages />
        </SectionColumn>
        <SectionColumn>
          <template v-if="tag.operations?.length > 0">
            <Card class="scalar-card-sticky">
              <CardHeader muted>Endpoints</CardHeader>
              <CardContent
                class="custom-scroll"
                muted>
                <div class="endpoints">
                  <a
                    v-for="operation in tag.operations"
                    :key="getOperationId(operation, tag)"
                    class="endpoint"
                    @click="scrollHandler(operation)">
                    <HttpMethod :method="operation.httpVerb" />
                    <span
                      :class="{
                        deprecated: operation.information?.deprecated,
                      }">
                      {{ operation.path }}
                    </span>
                  </a>
                </div>
              </CardContent>
            </Card>
          </template>
        </SectionColumn>
      </SectionColumns>
    </SectionContent>
  </Section>
</template>
<style scoped>
.endpoints {
  overflow: auto;
  background: var(--scalar-background-2);
  padding: 10px 12px;
}
@media (max-width: 580px) {
  .endpoints {
    max-height: calc(100vh - 150px);
  }
}
.endpoints span + span {
  text-align: left;
  margin-left: 12px;
  text-transform: initial;
}

.endpoint {
  display: flex;
  white-space: nowrap;
  cursor: pointer;
}
.endpoint span:first-of-type {
  text-transform: uppercase;
}
.endpoint .post,
.endpoint .get,
.endpoint .delete,
.endpoint .put {
  white-space: nowrap;
}
.endpoint span {
  color: var(--scalar-color-1);
  min-width: 62px;
  display: inline-block;
  text-align: right;
  line-height: 1.55;
  font-family: var(--scalar-font-code);
  font-size: var(--scalar-small);
  cursor: pointer;
}
.deprecated {
  text-decoration: line-through;
}
</style>
